Icons render as svg symbols (fix icon clipping)#4229
Icons render as svg symbols (fix icon clipping)#4229BrettJephson wants to merge 18 commits intomainfrom
Conversation
BrettJephson
had a problem deploying
to
2c-preview
GitHub Actions
Failure
🦋 Changeset detectedLatest commit: 6cd9f2a The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
BrettJephson
had a problem deploying
to
2c-preview
GitHub Actions
Failure
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
BrettJephson
had a problem deploying
to
2c-preview
GitHub Actions
Failure
BrettJephson
had a problem deploying
to
2c-preview
GitHub Actions
Failure
BrettJephson
had a problem deploying
to
2v-preview
GitHub Actions
Failure
BrettJephson
force-pushed
the
brett/fa-icons-rendering
branch
from
83f14dd to
9ad85cb
Compare
conico974
left a comment
conico974
left a comment
There was a problem hiding this comment.
Maybe I misunderstood something, but are we loading the icons with fetch on the client side ?
It means that we have to wait for hydration to be done and for JS to be fully loaded before even attempting to load the icons.
I can also see the behavior on initial load here https://gitbook-v2-fh22isgp4-gitbook.vercel.app/url/gitbook.com/docs, it takes a noticeable amount of times before icon start showing
2 participants
This change fixes the rendering of Font Awesome icons, which can become clipped.
Fixes RND-10291
Because we have been loading in the svg as an image file and applying a mask for colour we could not simply use
overflow: visibleto prevent clipping of images that overflow the svg’s viewbox. It is already a rasterized image so we only show the bit in the image canvas.The solution here is to render svg as an actual svg symbol in the document creating a spritesheet so we are using symbol definitions and
useand some id. This way we can reuse the svg symbol if it appears in multiple places in a page.This better aligns with Font Awesome’s recommended usage on the web and fixes the clipping and slightly improves rendering while keeping the size of icons the same.
Demo
Before:
After:
